<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				padding:0px;margin:0px;
			}
			img{
				width: 64px;
			}
			.box{
				position: absolute;
				width: 100%;
				bottom:0px;
				text-align: center;
			}
		</style>
	</head>
	<body style="height: 6000px;">
		<input type="text" />
		<input type="text" />
		<input type="text" />
		<input type="text" />
		<input type="text" />
		<div class="box">
			<img src="images/1.png" alt="" />
			<img src="images/2.png" alt="" />
			<img src="images/3.png" alt="" />
			<img src="images/4.png" alt="" />
			<img src="images/5.png" alt="" />
		</div>
		<script type="text/javascript">
			window.onload=function(){
				var aInput=document.getElementsByTagName('input');
				var aImg=document.getElementsByTagName('img');
				var oDiv=document.getElementsByTagName('div')[0];
				/*document.onmousemove=function(ev){
					var ev=ev||window.event;
					for(var i=0;i<aImg.length;i++){
						var imgLeft=aImg[i].offsetLeft+aImg[i].offsetWidth/2;
						var imgTop=aImg[i].offsetTop+aImg[i].offsetHeight/2+oDiv.offsetTop;
						
						var a=ev.clientX-imgLeft;
						var b=ev.clientY-imgTop;
						
						var c=Math.sqrt(Math.pow(a,2)+Math.pow(b,2));
						
						
						var s=1-c/200;
						//s:图片的缩放比例
						if(s<0.5){
							s=0.5;
						}
						aImg[i].style.width=s*128+'px';
						aInput[i].value=s;
					}
				}*/
				
document.onmousemove=function(ev){
	var ev=ev||window.event;
	var d=0;//限定范围初始值
	function distance(obj){
		return Math.sqrt(
			Math.pow(ev.clientX-(obj.offsetLeft+obj.offsetWidth/2),2)
			+
			Math.pow(ev.clientY-(obj.offsetTop+obj.offsetHeight/2+oDiv.offsetTop),2)
		);
	}
	
	
	for(var i=0;i<aImg.length;i++){
		d=Math.min(200,distance(aImg[i]));//不超过200的最大值。[限定d的范围]  
		//d=Math.max(200,distance(aImg[i]));//>=200是最小值。[限定d的范围]  
		aImg[i].style.width=(200-d)/200*64+64+'px';
		//第一个64代表增加比例，第二个64代表图片的默认值。
	}
	
}
				
				
}
		</script>
	</body>
</html>
